import React, { Component } from 'react'
import './index.css'

//创建Context对象, 一个用于保存
const MyContext = React.createContext()

export default class A extends Component {
  state = {username:'tom',age:18}
  render() {
    const {username,age} = this.state
    return (
      <div className="parent">
        <h3>我是A组件</h3>
        <h4>我的用户名是：{username}</h4>        
        <MyContext.Provider value={{username,age}}>
          <B />
        </MyContext.Provider>
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div className="child">
        <h3>我是B组件</h3>
        <h4>我从A组件接收到的用户名是：{this.props.username}</h4>
        <C />
      </div>
    )
  }
}

/*
class C extends Component {
  static contextType = MyContext
  render() {
    console.log(this)
    return (
      <div className="grandChild">
        <h3>我是C组件</h3>
        <h4>我从A组件接收到的用户名是：{this.context.username}, 年龄是：{this.context.age}</h4>
      </div>
    )
  }
}
*/

function C(){  
  return (
    <div className="grandChild">
      <h3>我是C组件</h3>
      <h4>我从A组件接收到的用户名是：
        <MyContext.Consumer>
          {
            value => (`${value.username},年龄是：${value.age}`)
          }
        </MyContext.Consumer>
      </h4>
    </div>
  )  
}